<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<title>XuLuo</title>
	<style>
		body{background: #080915;}
		.loader{position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 10px; display: inline-block;box-sizing: border-box;}
		/*第一种*/
		.loader-1{ border: 7px double #ff5722; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; }
		.loader-1:before,.loader-1:after{ content: ""; position: absolute; width: 12px; height: 12px; background: #ff5722; border-radius: 50%; bottom: 0; right: 37px; }
		.loader-1:after{ left: 37px; top: 0; }
		@-webkit-keyframes rotate{
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			100% {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}
		/* 第二种 */
		.loader-2 .css-square { position: absolute; top: 50%; width: 25px; height: 7px; background: white; box-shadow: 2px 2px 3px 0px black; }
		.loader-2 .square1 { left: 70px; -webkit-animation: dominos 1s 0.125s ease infinite; animation: dominos 1s 0.125s ease infinite; }
		.loader-2 .square2 { left: 60px; -webkit-animation: dominos 1s 0.3s ease infinite; animation: dominos 1s 0.3s ease infinite; }
		.loader-2 .square3 { left: 50px; -webkit-animation: dominos 1s 0.425s ease infinite; animation: dominos 1s 0.425s ease infinite; }
		.loader-2 .square4 { left: 40px; -webkit-animation: dominos 1s 0.540s ease infinite; animation: dominos 1s 0.540s ease infinite; }
		.loader-2 .square5 { left: 30px; -webkit-animation: dominos 1s 0.665s ease infinite; animation: dominos 1s 0.665s ease infinite; }
		.loader-2 .square6 { left: 20px; -webkit-animation: dominos 1s 0.79s ease infinite; animation: dominos 1s 0.79s ease infinite; }
		.loader-2 .square7 { left: 10px; -webkit-animation: dominos 1s 0.9s ease infinite; animation: dominos 1s 0.9s ease infinite; }
		.loader-2 .square8 { left: 0px; -webkit-animation: dominos 1s 1s ease infinite; animation: dominos 1s 1s ease infinite; }
		@-webkit-keyframes dominos {
			50% {
				opacity: 0.7;
			}
			75% {
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
			}
			80% {
				opacity: 1;
			}
		}
		/*第三种*/
		.load-wrap {position: relative;display: inline-block;}
		.loading-dot {width: 1em; height: 1em; background: #3498db; border-radius: 0.5em; position: absolute; left: 50%; top: 16px; margin-left: -0.5em; z-index: 1;}
		.loading-cir {width: 2em; height: 2em; background: none; border: 1px solid #3498db; border-radius: 2em; position: absolute; left: 50%; top: 0px; margin-left: -1em; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); z-index: 0; }
		.loading-cir{position: absolute; top: 8px; -webkit-animation: rotateplane .8s infinite linear; animation: rotateplane .8s infinite linear; }

		@-webkit-keyframes rotateplane {
			0% { -webkit-transform: perspective(100px) }
			100% { -webkit-transform: perspective(100px) rotateY(180deg) }
		}
		@keyframes rotateplane {
			0% {
				-webkit-transform: perspective(100px);
						transform: perspective(100px);

			}
			100% {
				-webkit-transform: perspective(100px) rotateY(180deg);
						transform: perspective(100px) rotateY(180deg);
			}
		}
	</style>
</head>
<body>
	<div class="loader loader-1"></div>
	<!-- 第二种 -->
	<div class="loader loader-2">
      <div class="css-square square1"></div>
      <div class="css-square square2"></div>
      <div class="css-square square3"></div>
      <div class="css-square square4"></div>
      <div class="css-square square5"></div>
      <div class="css-square square6"></div>
      <div class="css-square square7"></div>
      <div class="css-square square8"></div>
    </div>
    <!-- 第三种 -->
    <div class="load-wrap">
		<div class="loading-dot"></div>
		<div class="loading-cir"></div>
	</div>
</body>
</html>